<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<%@page import = "java.util.*" %>
<%@page import = "Modelo.*" %>
<%@page import = "javax.swing.*"%>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>

        <link type="text/css" href="<%=request.getContextPath()%>/jQuery/css/smoothness/jquery-ui-1.7.2.custom.css" rel="Stylesheet" />
        <script  type="text/javascript" src="<%=request.getContextPath()%>/jQuery/development-bundle/ui/ui.core.js"></script>
        <script  type="text/javascript" src="<%=request.getContextPath()%>/jQuery/development-bundle/ui/ui.draggable.js"></script>
        <script  type="text/javascript" src="<%=request.getContextPath()%>/jQuery/development-bundle/ui/ui.droppable.js"></script>
        <script type="text/javascript" src="<%=request.getContextPath()%>/jQuery/js/jquery-1.3.2.min.js"></script>
        <script type="text/javascript" src="<%=request.getContextPath()%>/jQuery/js/jquery-ui-1.7.2.custom.min.js"></script>

        <style type="text/css">
        #listaOrigen44 { float: left; width: 45%; min-height: 18em; background: #E0E0E0; padding: 1%;}
        * html .lista44 { height: 12em; } /* IE6 */
        .item44 { float: left; width: 280px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: left;list-style-type:none; }
        .titulo44{background: white; text-align: center}
        #listaDestino44 { float: right; width: 45%; min-height: 18em; padding: 1%;
            background: #E0E0E0}
        * html #trash { height: 18em; } /* IE6 */
        .titulo44{background: white; text-align: center}
    </style>

    <script  type="text/javascript">
        $(document).ready(function(){
            $(".item44").draggable({helper: 'clone' , cursor: 'move'});



            $(".lista44").droppable({
                accept: ".item44",
                drop: function(ev, ui) {
                    // Añado el objeto origen a la lista destino
                    $(this).append($(ui.draggable));
                }
            });

            $("#botonResultado44").click(function () {

                $('.lista44 li').each(function () {

                    if($(this).parent().attr('id')=='listaDestino44'){
                        crearP($(this).attr('id'));
                        alert("1-pregunta selecionada");

                    };
                });



                document.form44.submit();

            });


        });


    </script>
    <script type="text/javascript">
        var num=0;
        // Funcion para crear lineas de objetos
        function crearP(idi) {
            num++;
            fi = document.getElementById('na44'); // 1
            contenedor = document.createElement('div'); // 2
            contenedor.id = 'div44'+num; // 3
            fi.appendChild(contenedor); // 4

            ele = document.createElement('input'); // 5
            ele.type = 'hidden'; // 6
            ele.name = 'pregunta'+num;
            ele.id =idi;
            ele.value = idi;
            contenedor.appendChild(ele); // 7
        }
    </script>
    </head>
    <body>


        <form  name="form44" action="<%=request.getContextPath()+"/indicador/crearIn.jsp"%>" method="POST">
        <h1>Nuevo Representante</h1>
        <p>nombre:&nbsp; <input type="text" name="nombre" value="" /></p>
        <p>descripcion:&nbsp; <input type="text" name="descripcion" value="" /></p>

        <h3>Preguntas</h3>
            <div>
                <ul class="lista44" id="listaOrigen44">
                    <h4 class="titulo44"> Disponibles</h4>
                    <%


        List resultado = new Pregunta().getLista();

        Iterator iterador = resultado.iterator();
        Pregunta pre;

        while (iterador.hasNext()) {
            pre = (Pregunta) iterador.next();


                    if(pre.getIndicador()==null){
                    %>
                    <li class="item44" id="<%=pre.getId()%>"> <%=pre.getPregunta()%></li>
                    <%
                    }

        }
                    %>
                </ul>

                <ul class="lista44" id="listaDestino44">
                    <h4 class="titulo44"> Seleccionadas</h4>
                </ul>

            </div>
            <div id="na44"></div>

            <p><input type="button" id="botonResultado44" value="Crear Indicador"></p>
        </form>
        <p><a href="<%=request.getContextPath()%>/indicador/mostrar.jsp">ver todos los indicadores </a></p>
        <p><a href="#"> index</a></p>

    </body>
</html>